obsidian-插件-Pixel Banner
wuxl obsidian学习教程 2026年6月9日 10:06
Obsidian 插件：Pixel Banner — 给你的笔记穿上花裤衩
基础介绍
你有没有过这样的体验：打开自己的 Obsidian 笔记，满屏白纸黑字，像在读一份上世纪九十年代的 Word 文档？写着写着就困了，看着看着就倦了。
Pixel Banner 就是来解决这个问题的。它是一个能给每篇笔记加上顶部横幅图片（Banner）的插件，让你的知识库看起来不再是"麻袋装土豆"，而是"画廊挂油画"。
简单来说：它就是那个让你在一堆灰头土脸的笔记里，脱颖而出的小心机。
这个插件由 eQuill Labs （作者 jparkerweb）维护，GitHub 上 200+ star，迭代了 100+ 个版本，已经到了 v3.6+，属于 Obsidian 社区插件里"活得很滋润"的那一档。
它到底能干啥？
- 🖼️ 从本地 vault 里选一张图当 Banner
- 🌐 贴一个 URL，直接拉网络图片做 Banner
- 🔑 接入 Pexels / Pixabay / Flickr / Unsplash 四大图库，输入关键词自动找图
- 🤖 AI 生成 Banner（Pixel Banner Plus 付费功能，但给 5 个免费 Token）
- 🎬 支持 MP4/MOV 视频做动态 Banner（这个有点骚）
- 📂 按文件夹批量设置默认 Banner
- 🎲 在指定文件夹里随机轮换 Banner，每次打开都有新感觉
- 🎨 精细化调整：透明度、圆角、位置、动画、图标叠加……
一句话总结： 让你的 Obsidian 从"记事本"进化成"视觉系笔记" 。
使用场景
光列功能是耍流氓，讲场景才有说服力。下面几个场景你大概率中枪：
场景一：日报/周报/月报 — 一眼定位
你现在翻看三个月前的日报，密密麻麻的标题根本分辨不出哪篇是哪篇。如果每篇日报顶部都有一张风格统一但内容不同的 Banner——比如周一用日出、周五用夕阳、月底用总结感的图——你扫一眼就知道这篇笔记大概是什么时候、什么心情下写的。
场景二：项目笔记 — 建立视觉标识
你的 vault 里有十几个项目，每个项目一个文件夹。给每个项目文件夹设定一个默认 Banner（产品项目用产品原型图，技术项目用代码片段截图，设计项目用 mood board），打开任意笔记瞬间知道自己在哪个项目里。
场景三：读书笔记 — 封面即入口
读完一本书，用书的封面做 Banner，配上标题和作者信息。以后回看的时候，视觉记忆比文字记忆强太多了——你可能会忘记书名，但不会忘记封面。
场景四：灵感/创意笔记 — 激发联想
灵感这东西来无影去无踪。用一张氛围感强的 Banner 做背景，往往能让你回到记录灵感时的那个状态。毕竟人类是视觉动物，一张图有时候比一千个字更有唤醒力。
场景五：视频笔记 — 炫就完事了
录了一段操作演示，直接拿视频当 Banner。打开笔记，顶部一个循环播放的演示视频，你都不用往下翻就知道这篇笔记的核心内容。
基本使用
好了，吹了这么多，动手吧。
第一步：安装
这个跟装其他社区插件一样，轻车熟路：
- 打开 Obsidian → 设置 → 第三方插件
- 关闭安全模式
- 点「浏览」，搜索 "Pixel Banner"
- 安装 → 启用
装完之后，你会发现笔记左上角多了一个小旗帜图标 🚩（Banner Flag），点它就是一切的开始。
第二步：给你的第一篇笔记加 Banner
打开一篇笔记，点左上角那个小旗帜，会弹出一个选择界面。你有这么几种姿势：
姿势一：选本地图片
如果你的 vault 里已经有图了，直接在弹窗里选。插件会列出来 vault 里的图片文件，你挑一张就行。
选完后，笔记的 frontmatter 里会自动加一行：
banner: "[my-image.jpg](/wiki/my-image.jpg)"
对，就这么简单。切回阅读模式，Banner 就出现在笔记顶部了。
姿势二：直接贴链接
在 frontmatter 里手动写：
banner: "https://example.com/cool-banner.jpg"
插件会自动把这个网络图片拉过来当 Banner。
姿势三：关键词搜图
如果你配了图库 API（后面进阶部分讲），直接在 Banner 里写关键词：
banner: "mountain sunset"
插件会自动去图库搜一张"mountain sunset"的图回来。每次刷新还能换一张新的。
姿势四：视频 Banner
banner: "[demo-video.mp4](/wiki/demo-video.mp4)"
支持 MP4 和 MOV 格式。注意视频文件别太大，不然 Obsidian 启动的时候你会怀疑人生。
第三步：Banner 的四种写法（Frontmatter 格式）
Pixel Banner 在你写 frontmatter 时相当宽容，支持好几种格式：
| 格式 | 示例 | 备注 |
|---|---|---|
| Wiki 链接 | banner: "[folder/img.jpg](/wiki/folder/img.jpg)" |
推荐，Obsidian 原生方式 |
| 嵌入 Wiki | banner: "" |
注意引号不能省，YAML 的锅 |
| Markdown 图片 | banner: "" |
也可以用 |
| 纯路径 | banner: folder/img.jpg |
最简洁，兼容 Make.md 等插件 |
| URL | banner: "https://xxx.jpg" |
网络图片 |
| 外部文件 | banner: "file:///Users/me/img.jpg" |
macOS/Linux/Windows 全支持 |
| 关键词 | banner: sunset beach |
需要配图库 API |
一个小坑 ：以
!开头的值在 YAML 里有特殊含义，所以这种写法必须加双引号：banner: ""。不加引号？YAML 解析直接炸给你看。
第四步：调整 Banner 外观
Banner 加上了，但图片位置不对、太突兀、把标题挡住了……这些问题都能调。
在插件设置里，或者直接在笔记 frontmatter 里，你可以调整这些参数：
- 垂直/水平位置 ：Banner 是偏上还是偏下，左边还是右边
- 透明度 ：想让 Banner 低调一点，拉到 50% 透明度
- 圆角 ：方形太硬朗？加个圆角立刻柔和
- 显示模式 ：
cover（铺满）/auto（自适应）/contain（完整显示） - 动画效果 ：淡入淡出、滑动等
第五步：快捷操作按钮
加完 Banner 后，笔记顶部 Banner 区域会出现几个小按钮：
- 选择（Select） ：重新选一张图
- 固定（Pin） ：如果是 URL 或 API 搜来的图，点这个把它保存到本地 vault
- 刷新（Refresh） ：从同一个关键词或 URL 重新拉一张图
- 查看（View） ：放大查看完整 Banner 图
这四个按钮虽然小，但日常使用频率非常高。
进阶使用
基本操作玩熟了？来点硬核的。
进阶一：接入图库 API — 告别手动找图
这是 Pixel Banner 最爽的功能之一：输关键词就能自动找图。
以下四个图库都支持，挑一个（或全都要）：
| 图库 | 需要什么 | 免费额度 |
|---|---|---|
| Pexels | API Key | 免费，额度充裕 |
| Pixabay | API Key | 免费，额度充裕 |
| Unsplash | API Key | 免费，额度充裕 |
| Flickr | API Key | 免费，有调用限制 |
配置步骤 （以 Pexels 为例）：
- 去 Pexels API 注册，拿到 API Key
- 在 Obsidian 设置 → Pixel Banner → API Settings 里填入 Key
- 回到笔记，Banner 字段写关键词：
banner: autumn forest - 插件自动从 Pexels 搜一张秋天森林的图
- 点「刷新」按钮还能换一张
四个图库全配上，你就有了一个覆盖千万级图片的素材库。再也不用为了找一张 Banner 图去百度搜半天然后拖进 vault 了。
进阶二：文件夹默认设置 — 一次配置，终身受益
你有没有这种需求：一个项目文件夹下面几十篇笔记，每篇都要手动加 Banner，加到你怀疑人生。
Pixel Banner 的文件夹设置就是为此而生的：
- 设置 → Pixel Banner → Folder Settings
- 添加一个规则，比如：
- 文件夹路径：
projects/电商项目/- 默认 Banner：选一张电商相关的图
- 或者设定一个关键词：
ecommerce dashboard
- 保存
以后这个文件夹里 所有新建的笔记 都会自动带上这个 Banner。已有的笔记如果想批量应用，也可以用插件命令一键刷新。
高级操作 ：勾选「仅直接子级」（Direct Children Only），这样文件夹设置只对第一层子笔记生效，不会渗透到孙子辈的笔记里。
进阶三：图片轮换 — 每次打开都是惊喜
给某个文件夹配了多张 Banner 图，想每次打开随机展示一张？
在 Folder Settings 里，把 Banner 来源设为"指定文件夹"，然后勾选「随机轮换」（Shuffle）。插件会在你指定的图片文件夹里随机挑一张。
这个功能特别适合 日记文件夹 ——每天打开都是一张新图，心情都会好一点（或者不会更差）。
进阶四：Banner 图标 — 锦上添花的小点缀
除了 Banner 图本身，你还可以在 Banner 上叠加一个图标：
- 从 vault 里选一张小图做图标
- 从网络 URL 获取
- 用 Emoji
- 加一行文字
图标的位置、大小、颜色、背景样式全部可调。比如你可以在 Banner 右下角放一个 GitHub 的 logo，或者在左上角加 📅 表示这是日报。
这个功能虽然小，但 信息密度 很高——一眼就能从图标判断笔记类型。
进阶五：外部文件引用 — 跨 Vault 共享素材
你可能有多个 Obsidian vault，不想在每个 vault 里都存一份相同的 Banner 图。
用 file:// 协议指向一个外部文件夹：
# macOS / Linux banner: "file:///Users/你的用户名/Pictures/banners/mountain.jpg" # Windows banner: "file:///C:\\Users\\你的用户名\\Pictures\\banners\\mountain.jpg"
这样一来，所有 vault 都能共享同一套 Banner 素材库。改一张图，所有 vault 自动更新。
进阶六：视频 Banner — 动态笔记的终极形态
这是 v3.6 版本加入的新功能。支持 MP4 和 MOV 格式的视频作为 Banner：
banner: "[demo.mp4](/wiki/demo.mp4)"
视频会自动循环播放、静音。适合放在演示笔记、教程笔记、项目展示笔记里，打开瞬间就有"动起来"的感觉。
注意 ：别放 4K 高清 60 帧的视频——你是在做笔记，不是在跑电影院。建议压缩到 720p 以内，大小控制在 10MB 以下。
进阶七：自定义字段名 — 和其他插件和平共处
有的插件也用了 banner 这个 frontmatter 字段，冲突了怎么办？
在设置 → General → Custom Field Names 里，你可以把字段名改成任何你想要的名字，比如 header-image 或 cover-photo 。
进阶八：Pixel Banner Plus — 氪金玩家的快乐
Pixel Banner Plus 是一个可选的高级服务，核心卖点是 AI 生成 Banner 。你输入一段描述，AI 给你出图。
定价模式是 Token 制（不是订阅制），也就是说你买 Token，用一次扣一次，不用不花钱。新用户注册送 5 个 Token，可以先体验。
个人觉得：如果你有明确的设计需求（比如需要特定风格的插画 Banner），这玩意确实能省不少时间。但如果你只是想要好看的风景图/抽象图，免费的图库 API 完全够用。
小结
Pixel Banner 这个插件，本质上做的事非常单纯——在笔记顶部放一张图。但就是这么一个简单的功能，它做到了 极致 。
回顾一下我们聊了啥：
| 层次 | 内容 |
|---|---|
| 入门 | 安装插件，选图做 Banner，四种 frontmatter 写法 |
| 基础 | 调整外观（位置、透明度、圆角、显示模式），使用快捷按钮 |
| 进阶 | 接入 Pexels/Pixabay/Unsplash/Flickr 图库，关键词自动搜图 |
| 组织 | 文件夹默认设置，批量应用，随机轮换 |
| 高阶 | 图标叠加、外部文件引用、视频 Banner、自定义字段名 |
| 氪金 | Pixel Banner Plus AI 生成 Banner |
适合谁用？
- 视觉型学习者（看到图比看到文字记得牢）
- 笔记数量庞大的人（靠 Banner 做视觉定位）
- 想给客户/老板展示笔记的人（面子工程）
- 单纯想让 Obsidian 好看一点的人（没毛病）
不适合谁用？
- 极简主义者（你大概连插件都不装）
- 纯文本强迫症（看到图片混在 markdown 里就难受）
- 设备性能特别差的（尤其是视频 Banner 会很吃力）
最后一个私人建议：Banner 是锦上添花，不是雪中送炭。别花 80% 的时间挑图却忘了写笔记本身。图选得快、写得爽，才是王道。
插件 GitHub 仓库：jparkerweb/pixel-banner
obsidian-plugin-教程 · 目录
继续滑动看下一个
obsidian学习教程
向上滑动看下一个